<template>
  <div class="main-container">
    <Table
      ref="tableRef"
      :choiceColumn="false"
      :showSearch="false"
      :showPage="false"
      :columns="columns"
      :permission="permission"
      :apiUrl="apiUrl"
      :formData="formData"
      :emitUpStatus="true"
      :formShow="formShow"
      :defaultSort="defaultSort"
      @update:formData="setOptions"
      @openFormBefore="openFormBefore"
    >
      <template #icon="{ row }">
        <el-icon v-if="row.icon">
          <component :is="row.icon" />
        </el-icon>
      </template>
      <template #status="{ row }">
        <el-tag :type="row.status == '2' ? 'danger' : 'primary'">{{
          row.status == "2" ? "停用" : "正常"
        }}</el-tag>
      </template>
      <template #handle="{ list, row }">
        <el-button
          v-hasPermi="permission.add"
          color="#626aef"
          type="success"
          size="small"
          icon="Plus"
          circle
          @click="handleAdd(row.id, list)"
        />
      </template>
    </Table>
  </div>
</template>

<script setup name="Menu">
import { routerList, addRoute, putRoute, getRoute, delRoute } from "@/api/menu";
import Table from "@/components/Table/index";
const { proxy } = getCurrentInstance();
const tableRef = ref();
const defaultSort = ref({prop: 'orderNum', order: 'descending'});
const columns = [
  {
    prop: "menuName",
    label: "菜单名称",
    width: 200,
  },
  {
    prop: "orderNum",
    label: "排序",
    width: 100,
    align: "center",
    sortable:"custom"
  },
  {
    prop: "icon",
    label: "图标",
    width: 100,
    align: "center",
  },
  {
    prop: "perms",
    label: "权限字符",
  },
  {
    prop: "component",
    label: "组件地址",
  },
  {
    prop: "status",
    label: "状态",
  },
  {
    prop: "createTime",
    label: "创建时间",
    sortable:"custom"
  },
];

const formShow = ref("1");
const formData = [
  {
    type: "threeSelect",
    label: "上级菜单",
    prop: "pid",
    default: "0",
    options: [],
    width: "100%",
    nodekey: "id",
    showRule: ["1", "2", "3"],
    props: { label: "menuName", value: "id", children: "children" },
    rules: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
  },
  {
    type: "radio",
    label: "菜单类型",
    prop: "menuType",
    default: "1",
    options: [
      { value: "1", label: "目录" },
      { value: "2", label: "菜单" },
      { value: "3", label: "按钮" },
    ],
    width: "100%",
    showRule: ["1", "2", "3"],
    rules: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
    change: (data) => {
      formShow.value = data;
    },
  },
  {
    type: "input",
    label: "菜单名称",
    default: "",
    prop: "menuName",
    width: "100%",
    placeholder: "请输入菜单名称",
    showRule: ["1", "2", "3"],
    rules: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  },
  {
    type: "icon",
    label: "菜单图标",
    default: "",
    prop: "icon",
    width: "70%",
    placeholder: "请输入菜单图标(element-plus Icon)",
    showRule: ["1", "2"],
    rules: [{ required: false, message: "请输入菜单图标", trigger: "blur" }],
  },
  {
    type: "number",
    label: "显示排序",
    default: 1,
    prop: "orderNum",
    width: "100%",
    placeholder: "请输入显示排序",
    showRule: ["1", "2", "3"],
    rules: [{ required: true, message: "请输入显示排序", trigger: "blur" }],
  },
  {
    type: "radio",
    label: "是否外链(https://)",
    prop: "isFrame",
    default: "0",
    options: [
      { value: "1", label: "是" },
      { value: "0", label: "否" },
    ],
    width: "100%",
    showRule: ["1", "2"],
    rules: [{ required: false, message: "请选择是否外链", trigger: "blur" }],
  },
  {
    type: "input",
    label: "路由地址",
    default: "",
    prop: "path",
    width: "100%",
    placeholder: "请输入路由地址",
    showRule: ["1", "2"],
    rules: [{ required: true, message: "请输入路由地址", trigger: "blur" }],
  },
  {
    type: "input",
    label: "组件路径",
    default: "",
    prop: "component",
    width: "100%",
    placeholder: "请输入组件路径",
    showRule: ["2"],
    rules: [{ required: false, message: "请输入组件路径", trigger: "blur" }],
  },
  {
    type: "input",
    label: "权限字符",
    default: "",
    prop: "perms",
    width: "100%",
    placeholder: "请输入权限字符",
    showRule: ["2", "3"],
    rules: [{ required: false, message: "请输入权限字符", trigger: "blur" }],
  },
  {
    type: "radio",
    label: "是否缓存",
    prop: "isCache",
    default: "1",
    options: [
      { value: "1", label: "是" },
      { value: "0", label: "否" },
    ],
    width: "100%",
    showRule: ["2"],
    rules: [{ required: false, message: "请选择是否缓存", trigger: "blur" }],
  },
  {
    type: "radio",
    label: "菜单状态",
    prop: "status",
    default: "1",
    options: [
      { value: "1", label: "正常" },
      { value: "0", label: "停用" },
    ],
    width: "100%",
    showRule: ["1", "2", "3"],
    rules: [{ required: false, message: "请选择菜单状态", trigger: "blur" }],
  },
];

const apiUrl = {
  list: routerList,
  edit: putRoute,
  add: addRoute,
  del: delRoute,
  get: getRoute,
};
const permission = {
  add: "admin:menu:add",
  edit: "admin:menu:edit",
  del: "admin:menu:del",
};
const setOptions = (data) => {
  let options = [
    {
      id: "0",
      pid: -1,
      name: "VisitLog",
      path: "/visitLog",
      component: "Layout",
      menuName: "主目录",
      children: [...data],
    },
  ];

  formData[0].options = options;
};

const handleAdd = (id, list) => {
  formData[0].default = id;
  tableRef.value.handleAdd();
};
const openFormBefore = (form) => {
  if (form.hasOwnProperty("id")) {
    formShow.value = form.menuType;
  } else {
    formShow.value = "1";
  }
};
</script>

<style scoped lang="scss"></style>
